.header{
    width: 100%; height: 30px; position: fixed; top: 0;opacity:0.75;
}


.all{
    /* grid-template-columns: 20% auto 20%;
    grid-template-rows: 10% auto 20% 10%;
    grid-template-areas:"header header header"
                        "lefter mider righter"
                        "lefter mider righter"
                        "footer footer footer" */
    height: 100vh;
    width: 100vw;
}

.top{
    /* grid-area: header; */
    height: 5vh;
    width: 100vw;
}

.main{
    height: 85vh;
    width: 100vw;
}

.down{
    height: 10vh;
    width: 100vw;
}

.left{
    float: left;
    height: 85vh;
    width: 15vw;
    border: 1px #000000 solid;
}

.mid{
    float: left;
    height: 85vh;
    width: 69.5vw;
    border: 1px #000000 solid;
}

.right{
    float: left;
    height: 85vh;
    width: 15vw;
    border: 1px #000000 solid;
}
